<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="C" uri="http://java.sun.com/jsp/jstl/core" %>
<!doctype html>
<html class="no-js" lang="zxx">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>首页</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Favicon -->
    <link rel="shortcut icon" type="image/x-icon" href="<%=application.getContextPath()%>/static/mall/images/favicon.ico">

    <!-- All css files are included here -->
    <!-- Bootstrap fremwork main css -->
    <link rel="stylesheet" href="<%=application.getContextPath()%>/static/mall/bootstrap.min.css">
    <!-- This core.css file contents all plugings css file. -->
    <link rel="stylesheet" href="<%=application.getContextPath()%>/static/mall/css/core.css">
    <!-- Theme shortcodes/elements style -->
    <link rel="stylesheet" href="<%=application.getContextPath()%>/static/mall/css/shortcode/shortcodes.css">
    <!-- Theme main style -->
    <link rel="stylesheet" href="<%=application.getContextPath()%>/static/mall/style.css">
    <!-- Responsive css -->
    <link rel="stylesheet" href="<%=application.getContextPath()%>/static/mall/css/responsive.css">
    <!-- User style -->
    <link rel="stylesheet" href="<%=application.getContextPath()%>/static/mall/css/custom.css">


    <!-- Modernizr JS -->
    <script src="<%=application.getContextPath()%>/static/mall/js/vendor/modernizr-2.8.3.min.js"></script>
</head>

<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->

<!-- Body main wrapper start -->
<div class="wrapper">
    <!-- Start of header area -->
    <header>
        <div class="header-top-bar white-bg ptb-20">
            <div class="container">
                <div class="row">
                    <div class="col-sm-4">
                        <div class="header-top">
                            <ul>
                                <li class="lh-50">
                                    <a href="#" class="pr-20"><i class="zmdi zmdi-search"></i></a>
                                    <div class="header-bottom-search header-top-down header-top-hover lh-35">
                                        <form class="header-search-box" action="#" method="POST">
                                            <div>
                                                <input type="text" value="" placeholder="查找" autocomplete="off">
                                                <button class="btn btn-search" type="submit">
                                                    <i class="zmdi zmdi-search"></i>
                                                </button>
                                            </div>
                                        </form>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="header-logo text-center">
                            <a href="index.html">
                                <img alt="" src="<%=application.getContextPath()%>/static/mall/images/logo/logo.png">
                            </a>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="header-top header-top-right">
                            <ul>
                                <li class="lh-50">
                                    <a href="#" class="pr-20 text-uppercase">账户</a>
                                    <div class="header-top-down header-top-hover pl-15 lh-35">
                                        <ul>
                                            <li><a >登录</a></li>
                                            <li><a >我的钱包</a></li>
                                            <li><a >退出</a></li>
                                            <li><a >愿望清单</a></li>
                                        </ul>
                                    </div>
                                </li>
                                <li class="lh-50">
                                    <a href="#" class="prl-20 text-uppercase">退出</a>
                                </li>
                                <li class="cart-link lh-50">
                                    <a href="#" class="pl-20">
                                        <i class="zmdi zmdi-shopping-cart"></i>
                                        <span>2</span>
                                    </a>
                                    <div class="mini-cart-inner header-top-down p-20">
                                        <ul class="cart-list">
                                            <li class="p-10 mb-15">
                                                <a href="#" class="product-image">
                                                    <img src="<%=application.getContextPath()%>/files/minilajidai.png" alt="">
                                                </a>
                                                <div class="product-details ml-10">
                                                    <a href="#" class="remove">
                                                        <i class="zmdi zmdi-close"></i>
                                                    </a>
                                                    <a href="#" class="product-name mb-10">垃圾袋</a>
                                                    <span class="selected-color">颜色:  黑色</span>
                                                    <span class="selected-size">￥10.00</span>
                                                </div>
                                            </li>
                                            <li class="p-10 mb-15">
                                                <a href="#" class="product-image">
                                                    <img src="<%=application.getContextPath()%>/files/minidianfenshan.png" alt="">
                                                </a>
                                                <div class="product-details ml-10">
                                                    <a href="#" class="remove">
                                                        <i class="zmdi zmdi-close"></i>
                                                    </a>
                                                    <a href="#" class="product-name mb-10">电风扇</a>
                                                    <span class="selected-color">颜色:  蓝色</span>
                                                    <span class="selected-size">￥615.00</span>
                                                </div>
                                            </li>
                                            <li class="p-10 mb-15">
                                                <a href="#" class="product-image">
                                                    <img src="<%=application.getContextPath()%>/files/minifangshaisan.png" alt="">
                                                </a>
                                                <div class="product-details ml-10">
                                                    <a href="#" class="remove">
                                                        <i class="zmdi zmdi-close"></i>
                                                    </a>
                                                    <a href="#" class="product-name mb-10">防晒伞</a>
                                                    <span class="selected-color">颜色:  绿色</span>
                                                    <span class="selected-size">￥50.00</span>
                                                </div>
                                            </li>
                                        </ul>
                                        <div class="border-bottom"></div>
                                        <div class="cart-footer text-center">
                                            <p class="total mtb-15">
                                                小计:
                                                <span class="ml-35">$190.98</span>
                                            </p>
                                            <p class="buttons m-0">
                                                <a href="#" class="button extra-small">
                                                    <span>退出</span>
                                                </a>
                                            </p>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="sticky-header" class="header-area header-wrapper transparent-header">
            <div class="header-middle-area black-bg">
                <div class="container">
                    <div class="full-width-mega-dropdown">
                        <div class="row">
                            <div class="col-md-12">
                                <nav id="primary-menu">
                                    <ul class="main-menu text-center">
                                        <li><a href="#">首页</a></li>
                                        <li><a href="#">关于</a></li>
                                        <li><a href="#">爆款</a></li>
                                        <li><a href="#">博客</a></li>
                                        <li><a href="#">我的账户</a></li>
                                        <li><a href="#">登记</a></li>
                                        <li><a href="#">联系我们</a></li>
                                    </ul>
                                </nav>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </header>
    <!-- End of header area -->
    <!-- Start of slider area -->
    <div class="slider-area">
        <div id="ensign-nivoslider" class="slides">
            <img src="<%=application.getContextPath()%>/files/lb2.png" alt="" title="#htmlcaption1"/>
            <img src="<%=application.getContextPath()%>/files/lb3.png" alt="" title="#htmlcaption2"/>
        </div>
        <!-- direction 1 -->
        <div id="htmlcaption1" class="nivo-html-caption slider-caption-1">
            <div class="container slider-height">
                <div class="row slider-height">
                    <div class="col-md-offset-5 col-md-7 slider-height">
                        <div class="slide-text" style="left: 392px">
                            <div class="cap-title cap-main-title wow bounceInDown mb-35 text-uppercase text-white" data-wow-duration="0.5s" data-wow-delay="0s">
                                <h2><strong>2021</strong></h2>
                            </div>
                            <div class="cap-sub-title cap-main-title wow bounceInDown mb-40 text-uppercase text-white" data-wow-duration="1s" data-wow-delay="0s">
                                <h2>精品特别系列</h2>
                            </div>
                            <div class="cap-sub-title wow bounceInDown mb-30 text-white" data-wow-duration="1.5s" data-wow-delay="0s">
                                <p>生活在线商城，给你不一样的体验</p>
                            </div>
                            <div class="cap-shop wow bounceInUp" data-wow-duration="2s" data-wow-delay=".5s">
                                <a href="#" class="button extra-small text-uppercase">
                                    <span>现在去购物</span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- direction 2 -->
        <div id="htmlcaption2" class="nivo-html-caption slider-caption-2">
            <div class="container slider-height">
                <div class="row slider-height">
                    <div class="col-md-offset-5 col-md-7 slider-height">
                        <div class="slide-text" style="left: 392px">
                            <div class="cap-title cap-main-title wow bounceInDown mb-35 text-uppercase text-white" data-wow-duration="0.5s" data-wow-delay="0s">
                                <h2><strong>2021</strong></h2>
                            </div>
                            <div class="cap-sub-title cap-main-title wow bounceInDown mb-40 text-uppercase text-white" data-wow-duration="1s" data-wow-delay="0s">
                                <h2>精品特别系列</h2>
                            </div>
                            <div class="cap-sub-title wow bounceInDown mb-30 text-white" data-wow-duration="1.5s" data-wow-delay="0s">
                                <p>生活在线商城，给你不一样的体验</p>
                            </div>
                            <div class="cap-shop wow bounceInUp" data-wow-duration="2s" data-wow-delay=".5s">
                                <a href="#" class="button extra-small text-uppercase">
                                    <span>现在去购物</span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End of slider area -->
    <!-- Start page content -->
    <section id="page-content" class="page-wrapper">
        <!-- Start Banner Area 四张大图-->
        <div class="banner-area section-padding">
            <div class="container">
                <div class="row">
                    <div class="col-sm-5">
                        <div class="banner-img banner-hover mb-30">
                            <a  class="b-img">
                                <img src="<%=application.getContextPath()%>/files/da1.png" style="width: 457.5px;height: 292px;" alt="">
                            </a>
                            <div class="shop-cart-icon">
                                <a ><i class="zmdi zmdi-shopping-cart"></i></a>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-7">
                        <div class="banner-img banner-hover mb-30">
                            <a  class="b-img">
                                <img src="<%=application.getContextPath()%>/files/da2.jpg" style="width: 652.5px;height: 292px" alt="">
                            </a>
                            <div class="shop-cart-icon">
                                <a ><i class="zmdi zmdi-shopping-cart"></i></a>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-7">
                        <div class="banner-img banner-hover rmb-30">
                            <a  class="b-img">
                                <img src="<%=application.getContextPath()%>/files/da3.jpg" style="width: 652.5px;height: 292px" alt="">
                            </a>
                            <div class="shop-cart-icon">
                                <a ><i class="zmdi zmdi-shopping-cart"></i></a>
                            </div>
                        </div>
                    </div>
                    <div id="bianli-goods" class="col-sm-5">
                        <div class="banner-img banner-hover">
                            <a  class="b-img">
                                <img src="<%=application.getContextPath()%>/files/da4.jpg" style="width: 457.5px;height: 292px;" alt="">
                            </a>
                            <div class="shop-cart-icon">
                                <a ><i class="zmdi zmdi-shopping-cart"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- End of Banner Area 四张大图结束 -->
        <!-- Start Product List -->
        <div class="product-list-tab pb-90">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <div class="tab-menu section-title section-title  mb-30">
                            <!-- Nav tabs -->
                            <ul class="nav nav-tabs" role="tablist">
                                <li role="presentation" class="first-item">
                                    <a href="<%=application.getContextPath()%>/mall/index#bianli-goods" style="font-family: STKaiti;">全部</a>
                                </li>
                                <c:forEach items="${goodsTypeList}" var="goodsType" end="7">
                                    <li role="presentation">
                                        <a href="<%=application.getContextPath()%>/mall/getGoodsByType/${goodsType.id}#bianli-goods"  style="font-family: STKaiti;">${goodsType.typename}</a>
                                    </li>
                                </c:forEach>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="row">


                            <c:forEach items="${goodsList}" var="goods" step="1" >
                                <!-- 缩略图 -->
                                <div class="col-md-3">
                                    <div class="thumbnail">
                                        <img src="<%=application.getContextPath()%>${goods.picture}" style="width: 240px; height: 300px;" />
                                        <div style="margin-top: 7px;">
                                            <h4  class="text-center">${goods.name}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                                <small class="text-warning">￥${goods.salePrice}</small></h4>
                                        </div>
                                        &nbsp;
                                        <button class="btn btn-info" data-toggle="modal" data-target="#${goods.id}">
                                            <span class="glyphicon glyphicon-eye-open"></span>  详情
                                        </button>
                                        <button class="btn btn-danger">
                                            <span class="glyphicon glyphicon-heart"></span>  收藏
                                        </button>
                                        <button class="btn btn-success" >
                                            <span class="glyphicon glyphicon-ok"></span>  购买
                                        </button>
                                    </div>
                                </div>


                            </c:forEach>


                </div>
            </div>
        </div>
        <!-- End of Product List -->
        <!-- Start Service Area -->
        <div class="service-area section-padding">
            <div class="container">
                <div class="row">
                    <div class="col-sm-4">
                        <div class="single-item text-white pl-120">
                            <i class="zmdi zmdi-shopping-cart"></i>
                            <h4>免运费</h4>
                            <p>全平台商品免费送货上门</p>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="single-item text-white pl-120">
                            <i class="zmdi zmdi-headset"></i>
                            <h4>24小时服务</h4>
                            <p>24小时全天提供咨询服务</p>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="single-item text-white pl-120 rm-0">
                            <i class="zmdi zmdi-balance-wallet"></i>
                            <h4>100% 退款</h4>
                            <p>商品质量问题，全额退款</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- End of Service Area -->

        <!-- Start Testimonial Area -->
        <div class="testimonial-area">
            <div id="particles-js" class="pt-90 pb-50">
                <div class="container">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="testimonial-title text-white text-uppercase text-center mb-40">
                                <h4>关于我们</h4>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-offset-2 col-md-8">
                            <div class="testimonial-list">
                                <div class="single-testimonial text-center">
                                    <img alt="" src="<%=application.getContextPath()%>/static/mall/images/testimonial/1.jpg">
                                    <div class="testimonial-info white-bg clearfix">
                                        <div class="testimonial-author text-uppercase">
                                            <h5>阿妮卡·莫利克</h5>
                                            <p>主席</p>
                                        </div>
                                        <p>有很多良友，胜于有很多财富。————莎士比亚</p>
                                    </div>
                                </div>
                                <div class="single-testimonial text-center">
                                    <img alt="" src="<%=application.getContextPath()%>/static/mall/images/testimonial/2.jpg">
                                    <div class="testimonial-info white-bg clearfix">
                                        <div class="testimonial-author text-uppercase">
                                            <h5>阿西木·库马尔</h5>
                                            <p>CEO</p>
                                        </div>
                                        <p>今天应该做的事没有做，明天再早也是耽误了。————卢锡安</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- End of Testimonial Area -->
    </section>
    <!-- End page content -->


    <!--Quickview Product Start -->
    <div id="quickview-wrapper">
        <%--          模态款                      --%>
        <C:forEach items="${goodsList}" var="goods">
            <div class="modal fade" id="${goods.id}" tabindex="-1" role="dialog" style="left: -214px;">
                <div class="modal-dialog" role="document">
                    <div class="modal-content" style="width: 877px">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        </div>
                        <div class="modal-body">
                            <div class="modal-product">
                                <div class="single-product-image">
                                    <div id="product-img-content">
                                        <div id="my-tab-content" class="tab-content mb-20">
                                            <div class="tab-pane b-img active" id="">
                                                <img src="<%=application.getContextPath()%>${goods.picture}" style="width: 357px;height: 437px;" alt=""></a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="product-details-content" >
                                    <div class="product-content text-uppercase">
                                        <a href="product-details.html" title="Slim Shirt With Stretch">${goods.name}</a>
                                        <div class="rating-icon pb-20 mt-10">
                                            <i class="zmdi zmdi-star"></i>
                                            <i class="zmdi zmdi-star"></i>
                                            <i class="zmdi zmdi-star"></i>
                                            <i class="zmdi zmdi-star-half"></i>
                                            <i class="zmdi zmdi-star-half"></i>
                                        </div>
                                        <div class="product-price pb-20">
                                            <span class="new-price">￥ ${goods.salePrice * goods.discount}</span>
                                            <span class="old-price">￥ ${goods.salePrice}</span>
                                        </div>
                                    </div>
                                    <div class="product-view pb-20">
                                        <h4 class="product-details-tilte text-uppercase">商品描述</h4>
                                        <p> ${goods.discription}</p>
                                    </div>
                                    <div class="product-size text-uppercase pb-10">
                                        <h4 class="product-details-tilte text-uppercase pb-10">规格</h4>
                                        <p> ${goods.standard} / ${goods.unit} </p>
                                    </div>
                                    <div class="product-attributes clearfix">
                                        <div class="product-color text-uppercase pb-10" style="width: 24%">
                                            <h4 class="product-details-tilte text-uppercase pb-10">颜色</h4>
                                            <ul>
                                                <li class="color-1"><a ></a></li>
                                                <li class="color-2"><a ></a></li>
                                                <li class="color-3"><a ></a></li>
                                                <li class="color-4"><a ></a></li>
                                            </ul>
                                        </div>
                                        <div class="pull-left" id="quantity-wanted" style="margin-left: 32px">
                                            <h4 class="product-details-tilte text-uppercase pb-10">库存</h4>
                                            <span>${goods.num}</span>
                                        </div>
                                        <div class="pull-left"  style="margin-left: -80px">
                                            <h4 class="product-details-tilte text-uppercase pb-10">销量</h4>
                                            <span>${goods.saleNum}</span>
                                        </div>
                                    </div>
                                    <div class="product-action-shop text-center mb-30">
                                        <a  title="Quick view">
                                            <i class="zmdi zmdi-eye"></i>
                                        </a>
                                        <a  title="Add to cart">
                                            <i class="zmdi zmdi-shopping-cart"></i>
                                        </a>
                                        <a  title="Add to Wishlist">
                                            <i class="zmdi zmdi-favorite"></i>
                                        </a>
                                    </div>
                                    <div class="socialsharing-product">
                                        <h4 class="product-details-tilte text-uppercase pb-10">分享</h4>
                                        <button type="button"><i class="zmdi zmdi-facebook"></i></button>
                                        <button type="button"><i class="zmdi zmdi-instagram"></i></button>
                                        <button type="button"><i class="zmdi zmdi-rss"></i></button>
                                        <button type="button"><i class="zmdi zmdi-twitter"></i></button>
                                        <button type="button"><i class="zmdi zmdi-pinterest"></i></button>
                                    </div>
                                </div>
                                <!-- .product-info -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </C:forEach>

    </div>
    <!--End of Quickview Product-->

</div>
<!-- Body main wrapper end -->

<!-- Placed js at the end of the document so the pages load faster -->

<!-- jquery latest version -->
<script src="<%=application.getContextPath()%>/static/mall/js/vendor/jquery-3.1.1.min.js"></script>
<!-- Bootstrap framework js -->
<script src="<%=application.getContextPath()%>/static/mall/js/bootstrap.min.js"></script>
<!-- Particles js -->
<script src="<%=application.getContextPath()%>/static/mall/js/particles.js"></script>
<!-- All js plugins included in this file. -->
<script src="<%=application.getContextPath()%>/static/mall/js/plugins.js"></script>
<!-- Main js file that contents all jQuery plugins activation. -->
<script src="<%=application.getContextPath()%>/static/mall/js/main.js"></script>

</body>

</html>
